<template>
  <div class="container">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in staticList" :key="item.id">
          <div class="grid-content bg-purple">
            <span>{{item.text}}</span>
            <hr>
            <span style="font-size:26px;">{{item.num}}</span>
          </div>
         </el-col>
      </el-row>
      <el-row class="bdtop">
        <el-col class="title">
          <span ><i class="el-icon-star-on"></i>季度数据</span>
        </el-col>
        <el-col :span="14"><v-table></v-table></el-col>
        <el-col :span="10"><v-circle></v-circle></el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import vTable from '../components/g2Chart/G2line.vue'
import vCircle from '../components/g2Chart/G2cicrul.vue'
export default {
  data () {
    return {
      staticList: [{ text: '当前流量', num: '894,231', id: 1 },
        { text: '今日订单', num: '268', id: 2 },
        { text: '成交量', num: '14,231', id: 3 },
        { text: '成交额', num: '￥94,231', id: 4 }]
    }
  },
  created () {

  },
  methods: {

  },
  components: {
    vTable,
    vCircle
  }

}
</script>
<style lang="less" scoped>
.el-card {
  margin-top:10px;
  .grid-content {
    text-align: center;
    height:100px;
    border-radius: 7px;
    position: relative;
    padding-top:25px;

  }
  hr {
    width:50%;
  }
  .bg-purple {
    background:linear-gradient(to right, #9c27b0 , #ff9800ad);
  }
}
.title {
  font-size:15px;
  color:black;
  margin-bottom:15px;
}
.el-icon-star-on {
  color:#9c27b0;
}
.bdtop {
  margin:15px;
}
</style>
